<template>
  <div>
    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      ref="actionRef"
      :row-key="(row) => row.id"
      @update:checked-row-keys="onCheckedRow"
      :actionColumn="actionColumn"
      @load="onLoad"
      :scroll-x="1090">
      <template #tableTitle>
        <n-button type="primary" @click="exportData">导出</n-button>

        <n-upload
          :action="importDataUrl()">
          <n-button>上传文件</n-button>
        </n-upload>
        <!--        <n-form-->
<!--          :model="formValue"-->
<!--          label-placement="left"-->
<!--          class="py-8"-->
<!--          inline>-->
<!--          <n-form-item label="医院名称" path="hosname">-->
<!--            <n-input v-model:value="formValue.hosname" placeholder="医院名称" />-->
<!--          </n-form-item>-->
<!--          <n-form-item label="医院编号" path="hoscode">-->
<!--            <n-input placeholder="医院编号" v-model:value="formValue.hoscode" />-->
<!--          </n-form-item>-->
<!--          <n-form-item>-->
<!--            <n-button type="primary" @click="reloadTable">查询</n-button>-->
<!--          </n-form-item>-->
<!--          <n-form-item>-->
<!--            <n-button type="error" @click="openSaveDialog">新增</n-button>-->
<!--          </n-form-item>-->
<!--          <n-form-item>-->
<!--            <n-button type="error" @click="batchRemove">批量删除</n-button>-->
<!--          </n-form-item>-->
<!--        </n-form>-->
      </template>
    </BasicTable>

    <!-- 编辑框 -->
<!--    <add ref="addRef" :hospSetId="hospSetId"></add>-->
  </div>

</template>

<script lang="ts" setup>
import { findDictChildData, exportData, importDataUrl } from "@/api/yygh/dict";
import { BasicTable, TableAction } from '@/components/Table';
import { columns} from './columns';

import { h, reactive, ref } from "vue";
import { useDialog, useMessage } from "naive-ui";

const addRef = ref(null);
const dialog = useDialog();

const message = useMessage();
const formValue = reactive({})
const pageObj = reactive({
  page: 1,
  limit: 10,
  total: 100
})
const actionRef = ref();
const hospSetId = ref(11111) // 当前编辑的医院设置id

const batchCheckIds = ref([]) // 批量选中的id列表

const loadDataTable = async () => {
  return await findDictChildData("1");
};

const reloadTable =() => actionRef.value.reload();


function onCheckedRow(rowKeys) {
  console.log(rowKeys);
  rowKeys.forEach(r => batchCheckIds.value.push(r))
}

const actionColumn = reactive({
  width: 350,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction as any, {
      style: 'button',
      actions: [
        // {
        //   label: record.status? '锁定' : '取消锁定',
        //   type: record.status?'': 'warning',
        //   icon: 'ic:outline-delete-outline',
        //   onClick: ()=> {
        //     console.log("111", record)
        //     lockHospSet(record.id, record.status == 0 ? 1: 0).then(() => {
        //       reloadTable()
        //     })
        //   },
        //   // 根据业务控制是否显示 isShow 和 auth 是并且关系
        //   ifShow: () => {
        //     return true;
        //   },
        //   // 根据权限控制是否显示: 有权限，会显示，支持多个
        //   auth: ['admin:hospset:delete'],
        // },
        {
          label: '删除',
          icon: 'ic:outline-delete-outline',
          onClick: handleDelete.bind(null, record),
          // 根据业务控制是否显示 isShow 和 auth 是并且关系
          ifShow: () => {
            return true;
          },
          // 根据权限控制是否显示: 有权限，会显示，支持多个
          auth: ['admin:hospset:delete'],
        },
        {
          label: '编辑',
          onClick: handleEdit.bind(null, record),
          ifShow: () => {
            return true;
          },
          auth: ['admin:hospset:update'],
        },
      ],
      dropDownActions: [
        {
          label: '启用',
          key: 'enabled',
          // 根据业务控制是否显示: 非enable状态的不显示启用按钮
          ifShow: () => {
            return true;
          },
        },
        {
          label: '禁用',
          key: 'disabled',
          ifShow: () => {
            return true;
          },
        },
      ],
      select: (key) => {
        message.info(`您点击了，${key} 按钮`);
      },
    });
  },
});

function handleEdit(record: Recordable) {
  console.log('点击了编辑', record);
  hospSetId.value = record.id;
  addRef.value.openModal();
  addRef.value.reloadData(hospSetId.value);
}

function handleDelete(record: Recordable) {
  console.log('点击了删除', record);
  dialog.info({
    title: '提示',
    content: '你确定要删除吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      console.log("确定")
      // deleteHospSet(record.id)
      reloadTable()
      // Long id 爪巴
    },
    onNegativeClick: () => {},
  });
}

// 批量删除
function batchRemove() {

  if(batchCheckIds.value.length == 0) {
    message.error("请选择要删除的数据")
  }
  console.log('点击了批量删除', batchCheckIds.value);
  dialog.info({
    title: '提示',
    content: '你确定要批量删除吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      console.log("确定")
      // batchDeleteHospSet(batchCheckIds.value)
      reloadTable()
      // Long id 爪巴
    },
    onNegativeClick: () => {},
  });
}

const openSaveDialog =() => addRef.value.openModal()

// 异步加载子级
const onLoad =(row: Record<string, unknown>) => {
  console.log("onLoad", row.id)
  return findDictChildData(row.id).then(res => {
    console.log("res", res)
    row.children = [];
    res.data.forEach(d => {
      row.children.push(d);
    })
  });
}
</script>

<style scoped>

</style>
